<template>
	<view class="viewport">
		<!-- 搜索框 -->
		<view class="search">
			<view class="input">
				<text class="icon-search">女靴</text>
			</view>
		</view>
		<!-- 分类 -->
		<view class="categories">
			<!-- 左侧：一级分类 -->
			<scroll-view class="primary" scroll-y>
				<view
					v-for="(item, index) in categoryList"
					:key="item.id"
					class="item"
					@tap="activeIndex = index"
					:class="{ active: index === activeIndex }"
				>
					<text class="name">{{ item.name }}</text>
				</view>
			</scroll-view>
			<!-- 右侧：二级分类 -->
			<scroll-view class="secondary" scroll-y>
				<!-- 焦点图 -->
				<XtxCarousel class="banner" :bannerList="bannerList" />
				<!-- 内容区域 -->
				<view class="panel" v-for="item in subCategory" :key="item.id">
					<view class="title">
						<text class="name">{{ item.name }}</text>
						<navigator class="more" hover-class="none">全部</navigator>
					</view>
					<view class="section">
						<navigator
							v-for="goods in item.goods"
							:key="goods.id"
							class="goods"
							hover-class="none"
							:url="`/pages/goods/goods?id=${goods.id}`"
						>
							<image class="image" :src="goods.picture"></image>
							<view class="name ellipsis">{{ goods.name }}</view>
							<view class="price">
								<text class="symbol">¥</text>
								<text class="number">{{ goods.price }}</text>
							</view>
						</navigator>
					</view>
				</view>
			</scroll-view>
		</view>
	</view>
</template>

<script>
import { getCategoryTopAPI } from '@/services/category'
import { getHomeBanner } from '@/services/home'
export default {
	data() {
		return {
			bannerList: [], // 轮播图数据
			categoryList: [],
			activeIndex: 0,
		}
	},
	onLoad() {
		this.getCategoryBanner()
		this.getCategoryTop()
	},
	// 需求：点击了一级分类，获取到当前一级分类对应的二级分类数据
	// 切换的是索引号，所以我们通过计算属性获取当前的二级分类数据
	computed: {
		// 初始化的时候，会直接进行计算
		subCategory() {
			if (!this.categoryList.length) return []
			return this.categoryList[this.activeIndex].children
		},
	},
	methods: {
		// 获取分类页面轮播图数据
		async getCategoryBanner() {
			const { result } = await getHomeBanner(2)
			this.bannerList = result
		},
		// 获取一级分类数据
		async getCategoryTop() {
			const { result } = await getCategoryTopAPI()
			this.categoryList = result
		},
	},
}
</script>

<style lang="scss">
page {
	height: 100%;
	overflow: hidden;
}
.viewport {
	height: 100%;
	display: flex;
	flex-direction: column;
}
.search {
	padding: 0 30rpx 20rpx;
	background-color: #fff;
	.input {
		display: flex;
		align-items: center;
		justify-content: space-between;
		height: 64rpx;
		padding-left: 26rpx;
		color: #8b8b8b;
		font-size: 28rpx;
		border-radius: 32rpx;
		background-color: #f3f4f4;
	}
}
.icon-search {
	&::before {
		margin-right: 10rpx;
	}
}
/* 分类 */
.categories {
	flex: 1;
	min-height: 400rpx;
	display: flex;
}
/* 一级分类 */
.primary {
	overflow: hidden;
	width: 180rpx;
	flex: none;
	background-color: #f6f6f6;
	.item {
		display: flex;
		justify-content: center;
		align-items: center;
		height: 96rpx;
		font-size: 26rpx;
		color: #595c63;
		position: relative;
		&::after {
			content: '';
			position: absolute;
			left: 42rpx;
			bottom: 0;
			width: 96rpx;
			border-top: 1rpx solid #e3e4e7;
		}
	}
	.active {
		background-color: #fff;
		&::before {
			content: '';
			position: absolute;
			left: 0;
			top: 0;
			width: 8rpx;
			height: 100%;
			background-color: #27ba9b;
		}
	}
}
.primary .item:last-child::after,
.primary .active::after {
	display: none;
}
/* 二级分类 */
.secondary {
	background-color: #fff;
	.carousel {
		height: 200rpx;
		margin: 0 30rpx 20rpx;
		border-radius: 4rpx;
		overflow: hidden;
	}
	.panel {
		margin: 0 30rpx 0rpx;
	}
	.title {
		height: 60rpx;
		line-height: 60rpx;
		color: #333;
		font-size: 28rpx;
		border-bottom: 1rpx solid #f7f7f8;
		.more {
			float: right;
			padding-left: 20rpx;
			font-size: 24rpx;
			color: #999;
		}
	}
	.more {
		&::after {
			font-family: 'erabbit' !important;
			content: '\e6c2';
		}
	}
	.section {
		width: 100%;
		display: flex;
		flex-wrap: wrap;
		padding: 20rpx 0;
		.goods {
			width: 150rpx;
			margin: 0rpx 30rpx 20rpx 0;
			&:nth-child(3n) {
				margin-right: 0;
			}
			image {
				width: 150rpx;
				height: 150rpx;
			}
			.name {
				padding: 5rpx;
				font-size: 22rpx;
				color: #333;
			}
			.price {
				padding: 5rpx;
				font-size: 18rpx;
				color: #cf4444;
			}
			.number {
				font-size: 24rpx;
				margin-left: 2rpx;
			}
		}
	}
}
</style>
